<template>
  <el-tabs  @tab-click="handleClick" v-model='selectValue' v-if='value'>
    <el-tab-pane label="柱状图" name="1" lazy >
      <bar-chart :value='value' :index='index' :isSelected='isSelectedItem'></bar-chart>
    </el-tab-pane>
    <el-tab-pane label="折线图" name="2" lazy v-if='isSelectedItem'>
    <line-chart :value='value' :index='index' :isSelected='isSelectedItem'></line-chart>
  </el-tab-pane>
    <el-tab-pane label="饼图" name="3" lazy >
      <pie-chart :value='value' :index='index' :isSelected='isSelectedItem'></pie-chart>
    </el-tab-pane>
    <el-tab-pane label="词云" name="4" lazy v-if='!isSelectedItem'>
      <word-cloud :value='value' :index='index' :isSelected='isSelectedItem'></word-cloud>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
  import BarChart from '@/views/project/form/statistics/BarChart'
  import PieChart from '@/views/project/form/statistics/PieChart'
  import WordCloud from '@/views/project/form/statistics/WordCloud'
  import LineChart from '@/views/project/form/statistics/LineChart'
  export default {
    name: 'ChartSelect',
    components: { BarChart,PieChart,WordCloud,LineChart },
    props: ['value','index', ''],
    data() {
      return {
        selectValue: '1',
        isSelectedItem: this.value[0].type !== null
      }
    },
    methods: {
      handleClick() {

      }
    }
  }
</script>

<style scoped>

</style>
